<template>
  <div>
    <mt-header :title="title" :fixed="true">
      <router-link style="text-decoration: none;" to="/myaddress" slot="left">
        <span class="iconfont icon-go-back"></span>
      </router-link>
      <mt-button v-if="this.title === '修改地址'" class="font" slot="right" @click="removeAddr">删除</mt-button>
    </mt-header>
    <div class="edit-addr-form">
      <div class="addr-item">
        <p class="addr-label">联系人</p>
        <input class="addr-inp" required placeholder="姓名" v-model="addrInfo.name" />
      </div>
      <div class="addr-item sex" style="border-bottom: 1px solid #f3f3f3;">
        <span :class="['call-tag', addrInfo.sex === 1? 'is-selected': '']" @click="changeSex(1, $event)">先生</span>
        <span :class="['call-tag', 'tag-center', addrInfo.sex === 0? 'is-selected': '']" @click="changeSex(0, $event)">女士</span>
      </div>
      <div class="addr-item">
        <p class="addr-label">电话</p>
        <input class="addr-inp" required placeholder="手机号码" v-model="addrInfo.phone" />
      </div>
      <div class="addr-item">
        <p class="addr-label">地址</p>
        <input class="addr-inp" required placeholder="小区/写字楼/学校等" v-model="addrInfo.address" readonly @click="searchAddr" />
        <span class="iconfont icon-jiantou-elm" @click="searchAddr"></span>
      </div>
      <div class="addr-item">
        <p class="addr-label">门牌号</p>
        <input class="addr-inp" placeholder="10号楼5层501室222" v-model="addrInfo.address_detail" />
        <span class="iconfont icon-changyongicon-"></span>
      </div>
      <div class="addr-item tag">
        <p class="addr-label">标签</p>
        <span :class="['call-tag', addrInfo.tag_type === 1 ? 'is-selected': '']" @click="setTag(1, $event)">家</span>
        <span  :class="['call-tag', 'tag-center', addrInfo.tag_type === 2 ? 'is-selected': '']" @click="setTag(2, $event)">学校</span>
        <span  :class="['call-tag', addrInfo.tag_type === 3 ? 'is-selected': '']" @click="setTag(3, $event)">公司</span>
      </div>
    </div>
    <button class="addr-sure" @click="editAddress">确定</button>
  </div>
</template>

<script>
import { editAddress, removeAddress, addAddress } from '@/api/elm-data'
export default {
  name: 'edit-addr',
  data() {
    return {
      title: '',
      addrInfo: {
        name: '',
        address: '',
        address_detail: '',
        tag_type: 0,
        sex: 1,
        phone: '',
        user_id: '',
        st_geohash: 'wwmt7c4fnfy9'
      }
    }
  },
  methods: {
    async removeAddr() {
      const res = await removeAddress(this.addrInfo)
      if(res.status === 200) {
        this.$router.replace('/myaddress')
      }
    },
    searchAddr() {
      this.$router.push({ name: 'searchaddr', query: this.addrInfo })
    },
    changeSex(sex, e) {
      document.querySelector('.sex .is-selected')?.classList.remove('is-selected')
      e.target.classList.add('is-selected')
      this.addrInfo.sex = sex
    },
    setTag(tag, e) {
      if(this.addrInfo.tag_type === tag) {
        e.target.classList.remove('is-selected')
        return this.addrInfo.tag_type = 0
      }
      document.querySelector('.tag .is-selected')?.classList.remove('is-selected')
      e.target.classList.add('is-selected')
      this.addrInfo.tag_type = tag
      this.addrInfo.tag = e.target.innerText
    },
    async editAddress() {
      if(this.addrInfo.name === '') {
        return this.$toast('请输入联系人姓名')
      }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/).test(this.addrInfo.phone)){
        return this.$toast('请输入正确的联系电话')
      }
      if(this.title === '修改地址') {
        const { data } = await editAddress(this.addrInfo)
      }else if(this.title === '新增地址'){
        this.addrInfo.user_id = window.sessionStorage.getItem('USER_ID')
        const { data } = await addAddress(this.addrInfo)
      }
      this.$router.replace('/myaddress')
    }
  },
  created() {
    this.title = window.sessionStorage.getItem('editaddresstitle')
    window.sessionStorage.getItem('addrInfo')&&(this.addrInfo = JSON.parse(window.sessionStorage.getItem('addrInfo')))
    if(Reflect.ownKeys(this.$route.query).length > 0) {
      this.addrInfo = this.$route.query
    }
  },
  beforeRouteEnter(to, from, next) {
    if(from.path === '/myaddress' || from.path === '/searchaddr' || from.path === '/') {
      next()
    }else {
      if(window.sessionStorage.getItem('token')) {
        next('/myaddress')
      }else {
        next('/login')
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if(to.path === '/searchaddr') {
      window.sessionStorage.setItem('addrInfo', JSON.stringify(this.addrInfo))
      next()
    }else {
      window.sessionStorage.removeItem('addrInfo')
      next()
    }
  }
}
</script>

<style scoped>
  .edit-addr-form {
    margin-top: 70px;
    padding-left: 20px;
    background-color: #fff;
  }
  .addr-item {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  .addr-label {
    width: 150px;
    font-size: 30px;
    font-weight: 600;
  }
  .call-tag {
    width: 120px;
    height: 50px;
    border: 1px solid #b1b1b1;
    border-radius: 5px;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    color: #444444;
  }
  .call-tag:nth-child(1) {
    margin-left: 150px;
  }
  .tag-center {
    margin: 0 20px;
  }
  .addr-inp {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #f3f3f3;
    font-size: 28px;
    color: #565656;
  }
  .addr-sure {
    display: block;
    margin: 20px auto;
    width: 90%;
    padding: 18px;
    background-color: #00D762;
    border: none;
    border-radius: 5px;
    font-size: 32px;
    color: #fff;
  }
  .edit-addr-form .iconfont {
    font-size: 50px;
    color: #c3c3c3;
  }
  .icon-jiantou-elm {
    font-weight: 600;
  }
  .is-selected {
    color: #0097FF;
    background-color: #edf5ff;
  }
</style>
